<template>
  <div>
    <el-card class="sun-el-card">
      <sunUpdataAdd :title="this.$route.meta.title" :tab-list="tabList" />
      <el-table v-loading="listLoading" :header-cell-style="{color:'#000000'}" :data="list" border fit highlight-current-row>
        <!-- <el-table-column align="center" label="ID" prop="id" width="80" /> -->
        <el-table-column align="center" label="学年学期" prop="acad_year_term_name" width="200" />
        <el-table-column label="内容">
          <template slot-scope="{row}">
            <span v-if="tabItem.value === 'ncepi'" v-html="row.new_course_evaluation_process_intro" />
            <span v-if="tabItem.value === 'ocepi'" v-html="row.old_course_evaluation_process_intro" />
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="addData(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      width="60%"
      class="sun-el-dialog"
      :destroy-on-close="true"
      :lock-scroll="true"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="show_dialog"
    >
      <el-form ref="refForm" :model="formData" :rules="formRules">
        <el-form-item
          label="选择学年学期"
          prop="acad_year_term"
        >
          <el-select v-model="formData.acad_year_term" :disabled="formData.id !== ''" style="width: 100%" placeholder="请选择学年学期">
            <el-option
              v-for="item in acad_year_term_list"
              :key="item.acad_year_term"
              :label="item.acad_year_term_name"
              :value="item.acad_year_term"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          style="margin-bottom: 0"
          label="说明内容"
          prop="commitment"
        />
        <tinymce v-if="show_dialog" id="MyTinymce" ref="editor" v-model="formData.commitment" :visible-sync="show_dialog" :upload-parameters="{}" />
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" :disabled="requestLoading" @click="show_dialog = false">取 消</el-button>
        <el-button type="primary" size="small" :loading="requestLoading" @click="onFinish">完 成</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, put, post } from '@/api/request'
import SunUpdataAdd from '@/sun-components/SunUpdataAdd'
import Tinymce from '@/sun-components/Tinymce'

export default {
  name: 'Process',
  components: { SunUpdataAdd, Tinymce },
  data() {
    return {
      formRules: this.$validateField[this.$route.name],
      requestLoading: false,
      tabList: [
        { id: 1, old_id: 1, name: '课程评价流程介绍', value: 'ocepi', type: 'primary' },
        { id: 2, old_id: 1, name: '课程准入流程介绍', value: 'ncepi', type: 'mini' }
      ],
      tabItem: { id: 1, old_id: 1, name: '课程评价流程介绍', value: 'ocepi', type: 'primary' },
      show_dialog: false,
      list: null,
      listLoading: true,
      acad_year_term_list: [],
      formData: {
        id: '',
        acad_year_term: '',
        commitment: ''
      }
    }
  },
  created() {
    this.upData()
    this.get_acad_year_term()
  },
  methods: {
    upData() {
      this.requestData()
    },
    addData(row) {
      const _that = this
      if (row) {
        _that.formData.id = JSON.stringify(row.id)
        _that.formData.acad_year_term = row.acad_year_term
        switch (this.tabItem.value) {
          case 'ncepi':
            _that.formData.commitment = row.new_course_evaluation_process_intro
            break
          case 'ocepi':
            _that.formData.commitment = row.old_course_evaluation_process_intro
            break
        }
      }
      _that.show_dialog = true
    },
    async get_acad_year_term() {
      await get(`acad-year-term?method=post`).then(response => {
        if (response.code === 0) {
          this.acad_year_term_list = response.data
        }
      })
    },
    async tabHeaderSelect(id) {
      const _that = this
      _that.tabList?.forEach((item) => {
        if (item.old_id === id) {
          return false
        }
        if (item.id === id) {
          item.type = 'primary'
          _that.tabItem = item
          _that.upData()
        } else {
          item.type = 'mini'
        }
        item.old_id = id
      })
    },
    async onFinish() {
      const _that = this
      const id = _that.formData.id ? _that.formData.id : false
      const commitment = {
        acad_year_term: _that.formData.acad_year_term
      }
      switch (_that.tabItem.value) {
        case 'ncepi':
          commitment['new_course_evaluation_process_intro'] = _that.formData.commitment
          break
        case 'ocepi':
          commitment['old_course_evaluation_process_intro'] = _that.formData.commitment
          break
      }
      _that.$refs.refForm.validate(valid => {
        if (!valid) return
        _that.requestLoading = true
        if (id) {
          put(`course/evaluation/setting/${_that.tabItem.value}/${id}`, commitment).then(response => {
            if (response.code === 0) {
              _that.show_dialog = false
              _that.upData()
            }
            _that.requestLoading = false
          })
        } else {
          post(`course/evaluation/setting/${_that.tabItem.value}`, commitment).then(response => {
            if (response.code === 0) {
              _that.show_dialog = false
              _that.upData()
            }
            _that.requestLoading = false
          })
        }
      })
    },
    async requestData() {
      this.listLoading = true
      await get(`course/evaluation/setting/${this.tabItem.value}`, {}, { all: 1 }).then(response => {
        if (response.code === 0) {
          this.list = response.data
        }
        this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
</style>
